<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录 - 个人预算管理系统</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💰</text></svg>">
  <link rel="stylesheet" href="./css/style.css">
  <style>
    .auth-container {
      max-width: 400px;
      margin: 80px auto;
      background: white;
      padding: 40px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .auth-title {
      text-align: center;
      margin-bottom: 30px;
      color: #333;
    }
    
    .auth-tabs {
      display: flex;
      margin-bottom: 30px;
      border-bottom: 2px solid #eee;
    }
    
    .auth-tab {
      flex: 1;
      text-align: center;
      padding: 10px;
      cursor: pointer;
      color: #666;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
    }
    
    .auth-tab.active {
      color: #4285f4;
      border-bottom-color: #4285f4;
    }
    
    .auth-form {
      display: none;
    }
    
    .auth-form.active {
      display: block;
    }
    
    .form-input {
      width: 100%;
      padding: 12px;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    .auth-btn {
      width: 100%;
      padding: 12px;
      background: #4285f4;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    
    .auth-btn:hover {
      background: #3367d6;
    }
    
    .error-message {
      color: #ea4335;
      margin-bottom: 10px;
      font-size: 14px;
      text-align: center;
    }
    
    .success-message {
      color: #34a853;
      margin-bottom: 10px;
      font-size: 14px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="auth-container">
    <h1 class="auth-title">💰 预算管理系统</h1>
    
    <div class="auth-tabs">
      <div class="auth-tab active" onclick="switchTab('login')">登录</div>
      <div class="auth-tab" onclick="switchTab('register')">注册</div>
    </div>
    
    <div id="error-message" class="error-message" style="display:none;"></div>
    <div id="success-message" class="success-message" style="display:none;"></div>
    
    <!-- 登录表单 -->
    <form id="loginForm" class="auth-form active" autocomplete="off">
      <input type="text" id="loginUsername" class="form-input" placeholder="用户名" required autocomplete="off">
      <input type="password" id="loginPassword" class="form-input" placeholder="密码" required autocomplete="off">
      
      <!-- 版本选择 -->
      <div style="margin: 15px 0; padding: 15px; background: #f5f5f5; border-radius: 4px;">
        <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #333;">选择版本：</div>
        <div style="display: flex; gap: 10px;">
          <label style="flex: 1; cursor: pointer; padding: 10px; background: white; border: 2px solid #4285f4; border-radius: 4px; text-align: center;">
            <input type="radio" name="version" value="simple" checked style="margin-right: 5px;">
            <span>📱 简洁版</span>
            <div style="font-size: 11px; color: #666; margin-top: 5px;">核心功能</div>
          </label>
          <label style="flex: 1; cursor: pointer; padding: 10px; background: white; border: 2px solid #34a853; border-radius: 4px; text-align: center;">
            <input type="radio" name="version" value="advanced" style="margin-right: 5px;">
            <span>🚀 创新版</span>
            <div style="font-size: 11px; color: #666; margin-top: 5px;">全部功能</div>
          </label>
        </div>
      </div>
      
      <button type="submit" class="auth-btn">登录</button>
    </form>
    
    <!-- 注册表单 -->
    <form id="registerForm" class="auth-form" autocomplete="off">
      <input type="text" id="regUsername" class="form-input" placeholder="用户名" required autocomplete="off">
      <input type="text" id="regNickname" class="form-input" placeholder="昵称（可选）" autocomplete="off">
      <input type="password" id="regPassword" class="form-input" placeholder="密码（至少6位）" required autocomplete="new-password">
      <input type="password" id="regConfirmPassword" class="form-input" placeholder="确认密码" required autocomplete="new-password">
      
      <!-- 版本选择 -->
      <div style="margin: 15px 0; padding: 15px; background: #f5f5f5; border-radius: 4px;">
        <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #333;">选择版本：</div>
        <div style="display: flex; gap: 10px;">
          <label style="flex: 1; cursor: pointer; padding: 10px; background: white; border: 2px solid #4285f4; border-radius: 4px; text-align: center;">
            <input type="radio" name="regVersion" value="simple" checked style="margin-right: 5px;">
            <span>📱 简洁版</span>
            <div style="font-size: 11px; color: #666; margin-top: 5px;">核心功能</div>
          </label>
          <label style="flex: 1; cursor: pointer; padding: 10px; background: white; border: 2px solid #34a853; border-radius: 4px; text-align: center;">
            <input type="radio" name="regVersion" value="advanced" style="margin-right: 5px;">
            <span>🚀 创新版</span>
            <div style="font-size: 11px; color: #666; margin-top: 5px;">全部功能</div>
          </label>
        </div>
      </div>
      
      <button type="submit" class="auth-btn">注册</button>
    </form>
  </div>
  
  <script src="./js/api.js"></script>
  <script>
    // 切换标签
    function switchTab(tab) {
      document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active'));
      document.querySelectorAll('.auth-form').forEach(f => f.classList.remove('active'));
      
      if (tab === 'login') {
        document.querySelectorAll('.auth-tab')[0].classList.add('active');
        document.getElementById('loginForm').classList.add('active');
      } else {
        document.querySelectorAll('.auth-tab')[1].classList.add('active');
        document.getElementById('registerForm').classList.add('active');
      }
      
      hideMessages();
    }
    
    // 显示错误消息
    function showError(message) {
      const errorDiv = document.getElementById('error-message');
      errorDiv.textContent = message;
      errorDiv.style.display = 'block';
      document.getElementById('success-message').style.display = 'none';
    }
    
    // 显示成功消息
    function showSuccess(message) {
      const successDiv = document.getElementById('success-message');
      successDiv.textContent = message;
      successDiv.style.display = 'block';
      document.getElementById('error-message').style.display = 'none';
    }
    
    // 隐藏消息
    function hideMessages() {
      document.getElementById('error-message').style.display = 'none';
      document.getElementById('success-message').style.display = 'none';
    }
    
    // 登录
    document.getElementById('loginForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      hideMessages();
      
      const username = document.getElementById('loginUsername').value;
      const password = document.getElementById('loginPassword').value;
      const version = document.querySelector('input[name="version"]:checked').value;
      
      try {
        const result = await api.auth.login(username, password);
        showSuccess('登录成功，正在跳转...');
        
        // 保存用户信息
        localStorage.setItem('token', result.data.token);
        localStorage.setItem('username', username);
        localStorage.setItem('user_info', JSON.stringify(result.data));
        localStorage.setItem('preferredVersion', version);
        
        // 根据选择的版本跳转
        const targetPage = version === 'simple' ? './index-simple.html' : './index.html';
        
        setTimeout(() => {
          window.location.href = targetPage;
        }, 1000);
      } catch (error) {
        showError(error.message || '登录失败');
      }
    });
    
    // 注册
    document.getElementById('registerForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      hideMessages();
      
      const username = document.getElementById('regUsername').value;
      const nickname = document.getElementById('regNickname').value;
      const password = document.getElementById('regPassword').value;
      const confirmPassword = document.getElementById('regConfirmPassword').value;
      const version = document.querySelector('input[name="regVersion"]:checked').value;
      
      // 验证密码
      if (password.length < 6) {
        showError('密码至少需要6位');
        return;
      }
      
      if (password !== confirmPassword) {
        showError('两次密码输入不一致');
        return;
      }
      
      try {
        const result = await api.auth.register(username, password, nickname);
        showSuccess('注册成功，正在跳转...');
        
        // 保存用户信息
        localStorage.setItem('token', result.data.token);
        localStorage.setItem('username', username);
        localStorage.setItem('user_info', JSON.stringify(result.data));
        localStorage.setItem('preferredVersion', version);
        
        // 根据选择的版本跳转
        const targetPage = version === 'simple' ? './index-simple.html' : './index.html';
        
        setTimeout(() => {
          window.location.href = targetPage;
        }, 1000);
      } catch (error) {
        showError(error.message || '注册失败');
      }
    });
    
    // 页面加载完成
    console.log('登录页面已加载');
  </script>
</body>
</html> 